<template>
  <div class="my-feedback">
    <header>
      <div class="header">
        <span class="back" @click="back">
          <svg-icon icon-class="back"></svg-icon>
        </span>
        <h1 v-text="isDetail ? 'Feedback Detail' : 'My Feedback'"></h1>
        <span></span>
      </div>
    </header>
    <!-- 详情页 -->
    <div class="detail" v-if="isDetail">
      <ul class="list">
        <li class="detail-li">
          <div class="content">
            <p class="text" v-text="detailData.feedbackContent"></p>
          </div>
          <div class="foot">
            <span
              class="date"
              v-text="
                utils.dateFormat(detailData.createTime, 'MM-DD-YYYY HH:MM:SS')
              "
            ></span>
          </div>
        </li>
        <li v-if="detailData.replyContent">
          <div class="content" reply-title="Customer service reply">
            <p class="text" v-text="detailData.replyContent"></p>
          </div>
          <div class="foot">
            <span
              class="date"
              v-text="
                utils.dateFormat(detailData.modifyTime, 'MM-DD-YYYY HH:MM:SS')
              "
            ></span>
          </div>
        </li>
        <div v-else class="no-reply">No reply yet.</div>
      </ul>
      <mt-button
        @click="$router.push({ name: 'sendFeedback' })"
        class="reply"
        size="large"
        >Reply</mt-button
      >
    </div>
    <!-- 列表页 -->
    <div class="main" v-else>
      <ul class="list">
        <li
          @click="toDetail(item)"
          v-for="item of list.rows"
          :key="item.feedbackId"
        >
          <div class="content">
            <p class="text" v-text="item.feedbackContent"></p>
          </div>
          <div class="foot">
            <span class="chat" :class="{ dot: !item.state }">
              <svg-icon icon-class="chat-icon"></svg-icon>
              {{ item.replyContent ? "1" : "0" }}
            </span>
            <span
              class="date"
              v-text="utils.dateFormat(item.createTime, 'MM-DD-YYYY HH:MM:SS')"
            ></span>
          </div>
        </li>
      </ul>
      <ul class="pagination-box" v-show="list.pages > 1">
        <li class="pre-page">
          <mt-button @click.native="prePage">
            <svg-icon
              class="preIcon"
              icon-class="preIcon"
              slot="icon"
            ></svg-icon>
            Previous page
          </mt-button>
        </li>
        <li class="cur-total">
          <span class="current" v-text="list.current"></span>
          /
          <span class="total" v-text="list.pages"></span>
        </li>
        <li class="next-page">
          <mt-button @click.native="nextPage">
            Next page
            <svg-icon
              class="nextIcon"
              icon-class="nextIcon"
              slot="icon"
            ></svg-icon>
          </mt-button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: {}, //反馈列表数据
      params: {
        pageNum: 1,
        pageSize: 20,
      },
      scrollTop: 0,
      isDetail: false, // 是否打开详情
      detailData: {}, //详情数据
    };
  },
  components: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.feedbackList();
  },
  methods: {
    back() {
      if (this.isDetail) {
        this.isDetail = false;
      } else {
        this.$router.back(-1);
      }
    },
    // 上一页
    prePage() {
      if (this.list.current > 1) {
        this.params.pageNum -= 1;
        this.feedbackList();
        this.backTop();
      } else {
        return;
      }
    },
    // 下一页
    nextPage() {
      if (this.list.current < this.list.pages) {
        this.params.pageNum += 1;
        this.feedbackList();
        this.backTop();
      } else {
        return;
      }
    },
    //获取反馈列表
    async feedbackList() {
      let res = await this.$api.home.feedbackList(this.params);
      if (res.code === 1) {
        this.list = res.source;
      }
    },
    async toDetail(item) {
      this.detailData = item;
      this.isDetail = true;
      // 如果有回复或者未读 调用已读状态接口
      if (item.state == 0) {
        let params = {
          feedbackId: item.feedbackId,
        };
        let res = await this.$api.home.readStateUpdate(params);
        if (res.code === 1) {
          this.feedbackList();
        }
      }
    },
    // 返回顶部
    backTop() {
      let timer = setInterval(() => {
        let ispeed = Math.floor(-this.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          this.scrollTop + ispeed;
        if (this.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 160);
    },
  },
};
</script>

<style lang="scss" scoped>
.my-feedback {
  padding-bottom: 48px;
  > header {
    width: 100%;
    height: 100px;
    margin-bottom: 64px;
    .header {
      width: 100%;
      height: 100px;
      background: #fff;
      box-sizing: border-box;
      padding: 23px 15px 0 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: fixed;
      .back {
        .svg-icon {
          width: 56px;
          height: 56px;
        }
      }
      > h1 {
        font-size: 34px;
        color: #333333;
      }
    }
  }
  > .detail {
  }
  > .main,
  .detail {
    > .list {
      padding: 0 32px;
      li {
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #eeeeee;
        &.detail-li {
          margin-bottom: 65px;
        }
        .content {
          margin-bottom: 16px;
          &::before {
            content: attr(reply-title);
            color: #333333;
            font-size: 32px;
            font-weight: 600;
            line-height: 53px;
          }
          p.text {
            min-height: 100px;
            font-size: 28px;
            line-height: 40px;
            color: #333333;
            font-family: Poppins-Regular, Poppins;
            display: -webkit-box;
            overflow: hidden;
            white-space: normal !important;
            text-overflow: ellipsis;
            word-wrap: break-word;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
          }
        }
        .foot {
          font-size: 22px;
          margin-bottom: 32px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .chat {
            position: relative;
            .svg-icon {
              font-size: 32px;
              margin-right: 16px;
            }
            &.dot::after {
              content: "";
              width: 20px;
              height: 20px;
              position: absolute;
              top: -4px;
              left: 16px;
              margin-bottom: auto;
              border-radius: 16px;
              background: #e86472;
            }
          }
          .date {
            color: #999999;
          }
        }
      }
    }
    > .pagination-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .pre-page,
      .next-page {
        width: 208px;
        height: 58px;
        .mint-button {
          width: 100%;
          height: 100%;
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: space-around;
          background: #e86472;
          border-radius: 4px;
          font-weight: 600;
          color: #fff;
          font-size: 22px;
          .mint-button-icon {
            .svg-icon {
              width: 11px;
              height: 24px;
            }
          }
        }
        &.next-page {
          .mint-button {
            flex-direction: row-reverse;
          }
        }
      }
      .cur-total {
        color: #999999;
        font-size: 20px;
      }
    }
  }
  > .detail {
    > .list {
      .no-reply {
        margin-top: 333px;
        text-align: center;
        font-size: 34px;
        font-weight: 600;
        color: #999999;
      }
    }
    > .reply {
      position: absolute;
      bottom: 64px;
      left: 32px;
      width: calc(100% - 64px);
      height: 100px;
      color: #ffffff;
      font-weight: 500;
      border-radius: 20px;
      font-size: 34px;
      background: linear-gradient(90deg, #ef6a59 0%, #e25177 100%);
    }
  }
}
</style>
